import React from 'react';
import { Layout, Input, Col, Empty, message, Divider, Icon, notification } from 'antd';
import TaskSpan from "./components/ui/TaskSpan";
import uuidv4 from 'uuid/v4';
import './APP.css';
import classes from './APP.module.css';

const { Header, Content } = Layout;
const openNotificationWithIcon = (type, message) => {
  notification[type]({
    message: message
  });
};

class App extends React.Component {
  state = {
    taskValue: '',
    taskList:
      localStorage.getItem('taskList') === null
        ? []
        : JSON.parse(localStorage.getItem('taskList'))
  };


  taskValueHandler = e => {
    e.persist();
    this.setState({ taskValue: e.target.value });
  };

  taskBtnHandler = e => {
    let taskValue = this.state.taskValue;
    if (taskValue.replace(/^\s+|\s+$/g, '').length > 0) {
      let taskArr = this.state.taskList;
      const task = {
        id: uuidv4(),
        name: taskValue,
        state: 0
      };
      taskArr.push(task);
      this.setState({ taskList: taskArr, taskValue: '' });
      localStorage.setItem('taskList', JSON.stringify(taskArr));
    } else {
      message.error('请输入你得任务名称！');
    }
  };

  taskCloseHandler = (id) => {
    let { taskList } = this.state;
    const taskIndex = taskList.findIndex(task => task.id === id);
    let task = taskList[taskIndex];
    task.state = 1;
    localStorage.setItem('taskList', JSON.stringify(taskList));
    this.setState({ taskList });
    openNotificationWithIcon("success", "任务【" + task.name + "】已完成！")
  };

  taskDelHandler = (id) => {
    let { taskList } = this.state;
    const task = taskList[taskList.findIndex(task => task.id === id)];
    taskList.splice(taskList.findIndex(task => task.id === id), 1);
    localStorage.setItem('taskList', JSON.stringify(taskList));
    this.setState({ taskList });
    openNotificationWithIcon("error", "任务【" + task.name + "】已删除！")
  };

  render () {

    const { taskList } = this.state;
    const taskForList = [];
    const taskCompleteList = [];
    const taskForContent = [];
    const taskCompleteContent = [];
    taskList.forEach(task => {
      switch (task.state) {
        case 0:
          taskForList.push(task);
          taskForContent.push(
            <TaskSpan key={task.id} taskName={task.name} type="info"
              onClose={() => this.taskCloseHandler(task.id)} />
          );
          break;
        case 1:
          taskCompleteList.push(task);

          taskCompleteContent.push(
            <TaskSpan key={task.id} taskName={task.name} type="success"
              onClose={() => this.taskDelHandler(task.id)} />
          );
          break;
        default:
          taskForList.push(task);
      }
    });
    return (
      <Layout>
        <Header
          style={{
            position: 'fixed',
            zIndex: 1,
            width: '100%',
            background: '#348fe6',
            textAlign: 'center'
          }}
        >
          <Col
            xs={{ span: 1, offset: 8 }}
            style={{ textAlign: 'right', paddingRight: 15 }}
          >
            <img
              src={process.env.PUBLIC_URL + '/icon/task_logo.png'}
              alt="任务"
              style={{ width: '32px', height: '32px', marginBottom: '6px' }}
            />
          </Col>

          <Col xs={{ span: 5, lg: 1 }}>
            <div className="heder_input">
              <Input
                addonBefore="任务名称"
                id="taskValue"
                placeholder="请输入任务名称"
                value={this.state.taskValue}
                onChange={this.taskValueHandler}
                onPressEnter={this.taskBtnHandler}
              />
            </div>
          </Col>
          <Col xs={{ span: 1 }} style={{ textAlign: 'left' }}>
            <Icon
              type="plus-circle"
              onClick={this.taskBtnHandler}
              style={{
                fontSize: '25px',
                color: '#ffffff',
                paddingLeft: 15,
                paddingTop: 20
              }}
            />
          </Col>
        </Header>
        <Content
          style={{ padding: '0 80px', marginTop: 64, background: '#fff' }}
        >
          <div className={classes.taskContent}>
            {console.log(taskForContent.length)}
            {console.log(taskCompleteContent.length)}
            {taskForContent.length === 0 && taskCompleteContent.length === 0 ?
              <Empty className={classes.taskEmpty} description="你还没有添加任务哦！！！！！！！！" />
              :
              <div>
                <Divider key={uuidv4()}>进行中的任务</Divider>
                {taskForContent.length === 0 ? <Empty className={classes.taskEmpty} /> : taskForContent}
                <Divider key={uuidv4()}>完成的任务</Divider>
                {taskCompleteContent.length === 0 ?
                  <Empty className={classes.taskEmpty} /> : taskCompleteContent}
              </div>
            }
          </div>
        </Content>
      </Layout>
    );
  }
}

export default App;
